<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <script type="text/javascript" src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue/2.6.14/vue.min.js"></script><script type="text/javascript" src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js"></script><script type="text/javascript" src="https://cdn.staticfile.org/spark-md5/3.0.2/spark-md5.min.js"></script>
    <title>068-大文件上传和断点续传</title>
    <script type="module" crossorigin src="../../../../static/js/068-index.html-66d6d933.js"></script>
    <link rel="modulepreload" crossorigin href="../../../../static/common/modulepreload-polyfill-3cfb730f.js">
    <link rel="modulepreload" crossorigin href="../../../../static/common/page-53f648eb.js">
  </head>

  <body>
    <div id="app">
      <button @click="location.reload()">重置</button>
      <p>
        <span>每个分片大小：</span>
        <input v-model="chunkSize" min="1" type="number" placeholder="请输入" />
        <span>(单位Mb)</span>
      </p>
      <input type="file" @change="selectFile" />
      <div class="progress">
        <span>已上传: {{ uploadSize | fileSize }}</span>
        <span>总文件大小: {{ fileSizeTotal | fileSize }}</span><br />
        <span>上传进度：{{ uploadProgress }}</span>
        <p>
          <a v-if="previewFile" :href="previewFile" target="_blank">文件预览</a>
        </p>
      </div>
      <div>
        <button @click="handleBtn">{{ btn ? '继续' : '暂停' }}</button>
      </div>
    </div>

    
  </body>
</html>
